<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <script src="../lib/jquery-1.7.2.js"></script>
    <script src="../lib/bootstrap.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <script>
        window.onload = function () {
            var vm =new Vue({
                el: '#box',
                data: {myData: {},
                    b:2,
                    origin: ''},
                methods: {
                    get: function () {
                        this.$http.get('http://localhost:8080/getAskAnswerList2', {param: {askContent: "感冒"}}, {
                            jsonp: 'cb'
                        }).then(function (response) {
                                console.log(response)

                                console.log(response.data)
                                this.origin = response.body;
                                // this.myData.push(response.data)
                            this.myData = response.body
                            console.log(this.myData)
                            console.log(this.myData)
                                // alert(res.data);
                            }
                            // this.myData.push({rst:1}),
                            // function (res) {
                            //     alert(res.data);
                            // }
                            // this.data.push({
                            //     name: this.username,
                            //     age: this.age
                            // })
                        );
                    }
                }
            });
            vm.$watch('myData',function(){
                alert('发生变化了');
            },{deep:true});
            document.onclick=function(){
                vm.myData.origin='aaa';
            };
        };
    </script>
</head>
<body>
<div id="box">
    <p>{{ origin  }}</p>
    <hr>
    <p>{{ myData  }}</p>
    <input type="button" value="按钮" v-on:click="get()">

    <ul>
        <li v-for="(value,key) in myData">
            {{key}}==>{{value}}
            <!--<hr>-->
            <!--{{key}}-->
        </li>
    </ul>
    <table class="table table-bordered table-hover">
        <!--<tr class="text-center" v-for="(k,v) in origin">-->
            <!--{{k}}-->
            <!--<td>{{index+1}}</td>-->
            <!--<td>{{key}}</td>-->
            <!--<td>{{value}}     {{$key}}</td>-->
            <!--<td>{{item.age}}</td>-->
            <!--<td>-->
            <!--<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>-->
            <!--</td>-->
        <!--</tr>-->
    <!--</table>-->

    <!--<div id="box2">-->
        <!--{{myData | json}}-->
        <!--<br>-->
        <!--{{origin}}-->
    <!--</div>-->
</div>
</body>
</html>